<script lang="ts" setup>
import { ref } from "vue"
import router from "@/router"

const data = ref([
  {
    class: "p_robot",
    footer: "应用管理",
    link: "/admin/app"
  },
  {
    class: "p_menu",
    footer: "授权管理",
    link: "/admin/legal"
  },
  {
    class: "p_user",
    footer: "用户管理",
    link: "/admin/user"
  },
  {
    class: "p_sale",
    footer: "订单管理",
    link: "/admin/order"
  },
  {
    class: "p_code",
    footer: "代码加密",
    link: "/admin/encryption"
  },
  {
    class: "p_data",
    footer: "工单系统",
    link: "/admin/order"
  },
  {
    class: "p_pay",
    footer: "支付设置",
    link: "/admin/pay"
  },
  {
    class: "p_home",
    footer: "网站设置",
    link: "/admin/web_set"
  }
])

</script>

<template>
  <t-row class="container">
    <t-card class="card" header-bordered title="常用功能">
      <t-row>
        <t-col :lg="6" :md="6" :sm="6" :xl="6" :xs="12" class="group">
          <t-col v-for="(item, index) in data.slice(0,4)" :key="index" :span="3" class="item_container">
            <div class="item" @click="router.push(item.link)">
              <div><i :class="item.class" class="spirit_icon_pro" /></div>
              <div class="footer">{{ item.footer }}</div>
            </div>
          </t-col>
        </t-col>
        <t-col :lg="6" :md="6" :sm="6" :xl="6" :xs="12" class="group">
          <t-col v-for="(item, index) in data.slice(-4)" :key="index" :span="3" class="item_container">
            <div class="item" @click="router.push(item.link)">
              <div><i :class="item.class" class="spirit_icon_pro" /></div>
              <div class="footer">{{ item.footer }}</div>
            </div>
          </t-col>
        </t-col>
      </t-row>
    </t-card>
  </t-row>
</template>


<style lang="less" scoped>
@footer-color: #909399;
@border-color: var(--td-component-border);
.container {
  border: @border-color 1px solid;
  padding: 10px;
  margin: 10px 0;

  .card {
    width: 100%;

    .group {
      display: flex;

      .item_container {
        display: flex;
        align-items: center;
        justify-content: center;

        .item {
          cursor: pointer;
        }

        .footer {
          text-align: center;
          color: @footer-color;
        }
      }
    }

  }
}
</style>
